<template>
  <div class="formplane">
    <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
      <el-form-item label="菜单类型">
        <el-select :disabled="isTypeNameedit === true" v-model="formData.FTYPE" placeholder="请选择菜单类型" clearable :style="{ width: '100%' }">
          <template v-for="(item, index) in field108Options">
            <el-option :key="index" :label="item.label" :value="item.value" :disabled="item.disabled" v-if="!((formData.FTYPE===4||formData.FTYPE===1)&&item.value===5)"></el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="上级菜单">
        {{ formData.FParentName }}
      </el-form-item>
      <el-form-item label="菜单名称">
        <el-input v-model="formData.FMenuName" placeholder="请输入菜单名称" clearable :style="{ width: '100%' }"></el-input>
      </el-form-item>
      <el-form-item label="顺序号">
        <el-input-number v-model="formData.FOrderIndex" placeholder="请输入顺序号" :step="1" :min="0"></el-input-number>
      </el-form-item>

      <el-form-item label="菜单图标">
        <span v-if="formData.FIcon !== undefined && formData.FIcon !== ''" class="menuicon">
          <nx-svg-icon :class-name="formData.FIcon + '-icon'" :icon-class="formData.FIcon" slot="avatar" v-if="formData.ficontype==='svg'" />
          <i :class="formData.FIcon" v-else></i>
        </span>
        <a-button type="dashed" icon="search" @click="selectIcon" style="margin-left: 40px;">
          选择
        </a-button>
      </el-form-item>
      <el-form-item label="是否隐藏" v-if="formData.FTYPE===4">
        <el-radio-group v-model="formData.fhide">
          <el-radio :label="0">显示</el-radio>
          <el-radio :label="1">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="路径" v-if="formData.FTYPE===4">
        <el-input v-model="formData.FMenuUrl" placeholder="请输入路径" clearable :style="{ width: '100%' }"></el-input>
      </el-form-item>
      <el-form-item class="buttonitem">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <zhlDialog title="图标选择" ref="selectIcondialog" width="860px" class="my-dialog">
      <selecticons @selected="selectconfirm"></selecticons>
    </zhlDialog>
  </div>
</template>
<script>
import { selectOne, SaveMenu } from '@/api/tappmenu'
import nxSvgIcon from '@/components/nx-svg-icon/index'
import selecticons from './icons.vue'
export default {
  components: { nxSvgIcon, selecticons },
  props: ['isTypeNameedit', 'menudata'],
  data () {
    return {
      formData: {
        FTYPE: undefined,
        FParentName: undefined,
        FMenuName: undefined,
        FOrderIndex: 0,
        FIcon: undefined,
        ficontype: 'svg',
        FMenuUrl: undefined,
        FParentID: undefined,
        FID: undefined,
        fhide: 0
      },
      field108Options: [
        { label: '系统', value: 5 },
        { label: '文件夹', value: 1 },
        { label: '菜单', value: 4 }
      ]
    }
  },
  computed: {},
  watch: {

  },
  created () { },
  mounted () {
    if (this.menudata !== undefined && this.menudata !== null) {
      if (this.menudata.fid !== undefined && this.menudata.fid !== null) {
        selectOne(this.menudata.fid).then(res => {
          if (res.code === 0) {
            this.formData.FTYPE = res.data.ftype
            this.formData.FParentName = this.menudata.FParentName
            this.formData.FMenuName = res.data.fmenuname
            this.formData.FOrderIndex = res.data.forderindex
            this.formData.FIcon = res.data.ficon
            this.formData.ficontype = res.data.ficontype
            this.formData.FMenuUrl = res.data.fmenuurl
            this.formData.FParentID = res.data.fparentid
            this.formData.FID = res.data.fid
            this.formData.fhide = res.data.fhide
          }
        })
      } else {
        Object.assign(this.formData, this.menudata)
        this.formData.FTYPE = this.menudata.FType
      }
    }
  },
  methods: {
    submitForm () {
      if (
        this.formData.FMenuName === '' ||
        this.formData.FMenuName === undefined
      ) {
        this.$message.success('请输入菜单名称')
        return
      }
      if (
        this.formData.FOrderIndex === '' ||
        this.formData.FOrderIndex === undefined
      ) {
        this.$message.success('请输入顺序号')
        return
      }
      if (
        this.formData.FTYPE === 4 &&
        (this.formData.FMenuUrl === undefined ||
          this.formData.FMenuUrl === null)
      ) {
        this.$message.success('请输入路径')
        return
      }
      if (this.formData.FTYPE === 1) {
        this.formData.FMenuUrl = null
      }
      SaveMenu(this.formData).then(res => {
        if (res.code === 0) {
          this.formData.fid = res.data.fid
          this.$emit('SaveMenuinfo', this.formData)
          this.$message.success('保存成功！')
        }
      })
    },
    selectIcon () {
      this.$refs.selectIcondialog.visible = true
    },
    resetForm () {
      this.formData.FMenuName = undefined
      this.formData.FOrderIndex = 0
      this.formData.FIcon = undefined
      this.formdata.ficontype = undefined
      this.formData.FMenuUrl = undefined
      this.formData.fhide = 0
    },
    selectconfirm (icon) {
      this.formData.FIcon = icon.iconname
      this.formData.ficontype = icon.icontype
      this.$refs.selectIcondialog.visible = false
    }
  }
}
</script>
<style scoped>
.formplane {
  margin: 15px;
}
.buttonitem >>> .el-form-item__content {
  float: right;
  height: 100%;
}
.menuicon {
  font-size: 25px;
}
</style>
